/**
 * @description 通过指点选择器获取对应的函数节点
 * @param {*} selector 选择器
 * @returns 函数节点
 */
function $(selector) {
	//传入选择器得到的对应节点
	let nodeList = document.querySelectorAll(selector);
	if (nodeList.length === 0) {
		return console.warn(`${nodeList}没有获取到节点`);
	}
	if (nodeList.length === 1) {
		return nodeList[0];
	}
	if (nodeList.length > 1) {
		return nodeList;
	}
}

// 方式二
/*
function getDom(dom) {
	return document.querySelector(dom);
}
function getDoms(dom) {
	return document.querySelectorAll(dom);
}
*/

// 封装函数（用于tab页面的激活样式）
// 1.实现基本功能
// 2.确定函数名--tab()
// 3.确定函数参数--tabSelector,tabClassName,contSelector,contClassName
// 4.确定函数返回值--不需要
// 5.将功能代码放入函数壳子，替换对应变量
function tab(tabSelector, tabClassName, contSelector, contClassName) {
	// 遍历
	$(tabSelector).forEach(function (v, i) {
		// 给每个元素绑定事件
		v.addEventListener("click", function () {
			// 在遍历，再排他，移出所有的激活样式
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				// 通过对应的索引让卡片的内容消失
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			// 再给自己增加激活样式
			this.classList.add(tabClassName);
			// 点击元素通过对应的索引显示对应的卡片内容
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
// 6.调用测试
// 7.优化代码

// 封装函数（用户表单输入框的验证）
function reg(inpNode, spanNode, reg) {
	$(inpNode).addEventListener("blur", function () {
		// console.log(numberTipsReg.test(this.value));
		if (reg.test(this.value) === false) {
			this.style.border = "1px solid red";
			$(spanNode).style.display = "block";
		} else {
			this.style.border = "";
			$(spanNode).style.display = "none";
		}
	});
}
